<style type="text/css">
    body {
        margin: 0px !important;
    }

    .minheight_auto {
        min-height: auto !important;
    }
</style>
{include file="header/index" /}
<!--导航end-->
<div class="homeBox">
    <h2 class="mailTitle">数据台</h2>
    <div class="console_head">
        <div class="head_w25">
            <div class="color-red console-item">
                <p>
                    <span>今日结算金额</span>
                </p>
                <p>
                    {$data.today_money==0?'':'￥'}<span style="font-size:28px;padding-top: 10px;padding-bottom: 10px;">{$data.today_money}</span>
                </p>
                <p style="color:#FFFFFF">总结算金额：￥{$data.total_money}</p>
                <div class="console-icon">
                    <img src="/static/images/console_1.png">
                </div>
            </div>
        </div>
        <div class="head_w25">
            <div class="color-yellow console-item">
                <p>
                    <span>今日提现金额</span>
                </p>
                <p>
                    {$data.today_cash_money==0?'':'￥'}<span style="font-size:28px;padding-top: 10px;padding-bottom: 10px;">{$data.today_cash_money}</span>
                </p>
                <p style="color:#FFFFFF">总提现金额：￥{$data.total_cash_money}</p>
                <div class="console-icon ">
                    <img src="/static/images/console_2.png">
                </div>
            </div>
        </div>
        <div class="head_w25">
            <div class="color-green  console-item">
                <p>
                    <span>今日新增业务员</span>
                </p>
                <p>
                    <span style="font-size:28px;padding-top: 10px;padding-bottom: 10px;">{$data.today_add_workers}</span>
                </p>
                <p style="color:#FFFFFF">总业务员人数：{$data.total_workers}</p>
                <div class="console-icon">
                    <img src="/static/images/console_3.png">
                </div>
            </div>
        </div>
        <div class="head_w25">
            <div class="color-blue console-item">
                <p>
                    <span>今日新增工程人员</span>
                </p>
                <p>
                    <span style="font-size:28px;padding-top: 10px;padding-bottom: 10px;">{$data.today_add_engineers}</span>
                </p>
                <p style="color:#FFFFFF">总工程人员：{$data.total_engineers}</p>
                <div class="console-icon">
                    <img src="/static/images/console_4.png">
                </div>
            </div>
        </div>
    </div>

    <!--    <div class="headTwo">-->
    <!--        <div class="maliTwo">-->
    <!--            <div class="inlay">-->
    <!--                <div class="inlName">{$data.total_money}</div>-->
    <!--                <div class="inlPrice">结算总金额/元</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="maliTwo">-->
    <!--            <div class="inlay">-->
    <!--                <div class="inlName">{$data.total_cash_money}</div>-->
    <!--                <div class="inlPrice">提现总金额/元</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="maliTwo">-->
    <!--            <div class="inlay">-->
    <!--                <div class="inlName">{$data.total_workers}</div>-->
    <!--                <div class="inlPrice">业务员总数/人</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="maliTwo">-->
    <!--            <div class="inlay" style="border:none">-->
    <!--                <div class="inlName">{$data.total_engineers}</div>-->
    <!--                <div class="inlPrice">工程人员总数/人</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="canvasBox">
        <div class="canvas_75">
            <div class="chart-item">
                <div class="chart-head">
                    <ul id="chartTap">
                        <li class="active" data-type="order_chart">结算统计</li>
                        <li data-type="work_orders_chart">提现统计</li>
                    </ul>
                </div>
                <div class="chart-body">
                    <div id="order_chart" style="width: 100%;height: 450px;"></div>
                    <div id="work_orders_chart" style="width: 100%;height: 450px;display: none;"></div>
                </div>
            </div>
        </div>
        <div class="canvas_25">
            <div class="catalogue_show">
                <div class="catalogue_show_box">业绩排行榜</div>
            </div>
            <div class="list-item">
                <!--业务员、工程人员-->
                {if(!empty($data.workers_rank) || !empty($data.engineers_rank))}
                <div class="list-head" style="margin-top: 14px">
                    <ul id="listWorkOrderTap">
                        <li class="active" data-type="workers_list">业务员</li>
                        <li data-type="workOrdermoneys_list">工程人员</li>
                    </ul>
                </div>
                {/if}
                <div class="list-body minheight_auto">
                    <ul id="workers_list">
                        {if(!empty($data.workers_rank))}
                        {volist name="$data.workers_rank" id="v" key="k"}
                        <li>{$k}、{$v.workers_name}<b class="redcolor"> {$v.money}</b>元</li>
                        {/volist}
                        {/if}
                    </ul>
                    <ul id="workOrdermoneys_list" style="display: none;">
                        {if(!empty($data.engineers_rank))}
                        {volist name="$data.engineers_rank" id="v" key="k"}
                        <li>{$k}、{$v.engineers_name}<b class="redcolor"> {$v.money}</b>元</li>
                        {/volist}
                        {/if}
                    </ul>
                </div>

                <!--区域合伙人、城市合伙人-->
                {if(!empty($data.operation_rank) || !empty($data.administrative_rank))}
                <div class="list-head">
                    <ul id="listOrderTap">
                        <li class="active" data-type="operation_list">区域合伙人</li>
                        <li data-type="administrative_list">城市合伙人</li>
                    </ul>
                </div>
                {/if}
                <div class="list-body minheight_auto">
                    <ul id="operation_list">
                        {if(!empty($data.operation_rank))}
                        {volist name="$data.operation_rank" id="v" key="k"}
                        <li>{$k}、{$v.company_name}<b class="redcolor"> {$v.money}</b>元</li>
                        {/volist}
                        {/if}
                    </ul>
                    <ul id="administrative_list" style="display: none;">
                        {if(!empty($data.administrative_rank))}
                        {volist name="$data.administrative_rank" id="v" key="k"}
                        <li>{$k}、{$v.company_name}<b class="redcolor"> {$v.money}</b>元</li>
                        {/volist}
                        {/if}
                    </ul>
                </div>
                <!--渠道商、渠道推广员-->
                {if(!empty($data.channel_rank) || !empty($data.channel_promoters_rank))}
                <div class="list-head">
                    <ul id="listTap">
                        <li class="active" data-type="channel_list">渠道商</li>
                        <li data-type="promoters_list">渠道推广员</li>
                    </ul>
                </div>
                {/if}
                <div class="list-body minheight_auto">
                    <ul id="channel_list">
                        {if(!empty($data.channel_rank))}
                        {volist name="$data.channel_rank" id="v" key="k"}
                        <li>{$k}、{$v.name}<b class="redcolor"> {$v.money}</b>元</li>
                        {/volist}
                        {/if}
                    </ul>
                    <ul id="promoters_list" style="display: none;">
                        {if(!empty($data.channel_promoters_rank))}
                        {volist name="$data.channel_promoters_rank" id="v" key="k"}
                        <li>{$k}、{$v.name}<b class="redcolor"> {$v.money}</b>元</li>
                        {/volist}
                        {/if}
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>


<script>

    function deteleCon(obj) {
        $(obj).parents(".console-top").remove()
    }

    //区域合伙人
    $("#listOrderTap li").click(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
        $("#" + dataType).siblings().hide();
    })
    //城市合伙人
    $("#listWorkOrderTap li").click(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
        $("#" + dataType).siblings().hide();
    })
    //员工
    $("#listTap li").click(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
        $("#" + dataType).siblings().hide();
    })

    //统计图
    $("#chartTap li").click(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
        $("#" + dataType).siblings().hide();
    })


    // 近七天的日期
    var seven = ['{$data.seven[0]}', '{$data.seven[1]}', '{$data.seven[2]}', '{$data.seven[3]}',
        '{$data.seven[4]}', '{$data.seven[5]}', '{$data.seven[6]}'];
    // 走势统计图-----------------------------------------------------------------------------------------------------
    // 近七天的走势数据
    var order_seven = [{$data.seven_day_money[0]}, {$data.seven_day_money[1]},
        {$data.seven_day_money[2]}, {$data.seven_day_money[3]},
        {$data.seven_day_money[4]}, {$data.seven_day_money[5]},
        {$data.seven_day_money[6]}];
    var order_chart = document.getElementById('order_chart');
    var orderChart = echarts.init(order_chart);
    var orderOption = {
        tooltip: {},
        legend: {
            show: false,
            data: ['结算数']
        },
        xAxis: {
            boundaryGap: false,
            data: seven
        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    color: '#efefef'
                }
            }
        },
        series: [{
            name: '结算金额',
            type: 'line',
            // lineStyle: {
            //     // color: '#86c7e8'
            //     color: '#F62B65'
            // },
            // itemStyle: {
            //     // color: '#86c7e8'
            //     color: '#F62B65'
            // },
            stack: '总量',
            smooth: true,
            //背景渐变色
            areaStyle: {
                normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0.2, color: '#F62B65' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#FFF9F5' // 100% 处的颜色
                        }]
                    )
                },
            },
            color: ['#F62B65'],
            data: order_seven
        }]
    }
    orderChart.setOption(orderOption);
    var can_w = $("#order_chart").width();

    // console.log(can_w);


    // 走势统计图----------------------------------------------------------------------------------------------------
    var daySeven = ['{$data.seven[0]}', '{$data.seven[1]}', '{$data.seven[2]}', '{$data.seven[3]}',
        '{$data.seven[4]}', '{$data.seven[5]}', '{$data.seven[6]}'];
    // 近七天的走势数据
    var seven_value = [{$data.seven_day_cash_money[0]}, {$data.seven_day_cash_money[1]},
        {$data.seven_day_cash_money[2]}, {$data.seven_day_cash_money[3]},
        {$data.seven_day_cash_money[4]}, {$data.seven_day_cash_money[5]},
        {$data.seven_day_cash_money[6]}];
    var work_orders_chart = document.getElementById('work_orders_chart');
    // var work_ordersChart = echarts.init(work_orders_chart);
    var work_ordersChart = echarts.init(work_orders_chart, null, {width: can_w + 'px', renderer: 'canvas'});
    var mwork_ordersOption = {
        tooltip: {},
        legend: {
            show: false,
            data: ['提现记录数']
        },
        xAxis: {
            boundaryGap: false,
            data: seven
        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    color: '#efefef'
                }
            }
        },
        series: [{
            name: '提现金额',
            type: 'line',
            // lineStyle: {
            //     // color: '#89F7C1'
            //     color: '#FF7D27'
            // },
            // itemStyle: {
            //     // color: '#89F7C1'
            //     color: '#FF7D27'
            // },
            stack: '总量',
            smooth: true,
            //背景渐变色
            areaStyle: {
                normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0.2, color: '#FF7D27' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#FFF9F5' // 100% 处的颜色
                        }]
                    )
                },
            },
            color: ['#FF7D27'],
            data: seven_value
        }]
    }
    work_ordersChart.setOption(mwork_ordersOption);

    var cano_w = $("#work_orders_chart").width();
    console.log(cano_w)


</script>
</body>
</html>
